<template>
  <div class="topology-page">
    <div class="page-header">
      <h3>微服务架构拓扑图</h3>
      <el-button type="primary" @click="dialogVisible = true">
        <i class="el-icon-full-screen btn-icon"></i>
        全屏查看
      </el-button>
    </div>

    <div class="topology-container">
      <TopologyMap :topology="microserviceArchitecture" />
    </div>

    <TopologyDialog v-model="dialogVisible">
      <TopologyMap :topology="microserviceArchitecture" />
    </TopologyDialog>
  </div>
</template>

<script>
import TopologyDialog from '../components/TopologyDialog.vue'
import TopologyMap from "@/components/TopologyMap.vue";

export default {
  name: 'MicroserviceTopology',
  components: {
    TopologyMap,
    TopologyDialog
  },
  data() {
    return {
      dialogVisible: false,
      microserviceArchitecture: [
        {
          id: 'web',
          label: '前端应用层',
          children: [
            {
              id: 'gateway',
              label: 'API 网关层',
              children: [
                {
                  id: 'auth',
                  label: '认证服务',
                  children: [
                    {
                      id: 'mysql1',
                      label: 'MySQL 集群'
                    }
                  ]
                },
                {
                  id: 'user',
                  label: '用户服务',
                  children: [
                    {
                      id: 'mysql21',
                      label: 'MySQL 集群1'
                    },
                    {
                      id: 'redis1',
                      label: 'Redis 集群1'
                    },
                  ]
                },
                {
                  id: 'order',
                  label: '订单服务',
                  children: [
                    {
                      id: 'mysql31',
                      label: 'MySQL 集群1'
                    },
                    {
                      id: 'mq1',
                      label: 'RabbitMQ 集群1'
                    },
                    {
                      id: 'mysql32',
                      label: 'MySQL 集群2'
                    },
                    {
                      id: 'mq2',
                      label: 'RabbitMQ 集群2'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

<style scoped>
.topology-page {
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.topology-container {
  height: calc(100vh - 200px);
  border: 1px solid #eee;
  border-radius: 4px;
}

.btn-icon {
  margin-right: 8px;
}
</style>
